<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
	<title>


	</title>

	<style>
		html,
		body {
			padding: 0;
			margin: 0;
		}

		.box-timetabel {
			/* color: #3d4145; */
		}

		.box-timetabel * {
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}

		.box-timetabel .timetabel_hd {}

		.box-timetabel .timetabel_bd {
			position: relative;
			list-style: none;
			padding: 0 2% 0 0;
			margin: 0;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;

			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-lines: multiple;
			-moz-box-lines: multiple;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.box-timetabel .timetabel_tr {
			position: relative;
			width: 18%;
			padding: 8px 0;
			margin-left: 2%;
			margin-bottom: 2%;
			text-align: center;
			border-radius: 2px;
			border: 1px solid #eeeeee;
		}

		.box-timetabel .timetabel_tr.active {
			color: #ffffff;
			background-color: #f6383a;
		}

		.box-timetabel .timetabel_tr.disabled {
			color: #808080;
			background-color: #ddd;
		}

		.box-timetabel .timetabel_start::before {
			content: "入场";
		}

		.box-timetabel .timetabel_end::before {
			content: "离场";
		}

		.box-timetabel .timetabel_start::before,
		.box-timetabel .timetabel_end::before {
			position: absolute;
			top: -5px;
			left: 0;
			padding: 0 2px;
			border-radius: 2px;
			font-size: 10px;
			color: #ffffff;
			background-color: #FFB800;
		}

		.box-timetabel .timetabel_start {}

		.box-timetabel .timetabel_end {}
	</style>
</head>

<body>

	<div>
		<div class="box-timetabel">
			<div class="timetabel_hd">2018-11-06</div>
			<ul class="timetabel_bd" id="timetabelBd">
				<!-- <li class="timetabel_tr active">
					<span class="timetabel_start">入场</span>
					7:30
				</li>
				<li class="timetabel_tr active">
					<span class="timetabel_end">离场</span>
					7:30</li>
				<li class="timetabel_tr ">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li>
				<li class="timetabel_tr">7:30</li> -->
			</ul>
		</div>
	</div>

	<script>
		/**
		 * 获取时刻表
		 * @param {String} x 格式，缺省 0：7:30
		 * @param {String} y 格式，缺省 25：8:30
		 * @returns {Array} 格式：["7:00", "7:30", "8:00", "8:30"]
		 */
		function timeTable(x, y) {
			var array = [];
			x = x ? Number(timeToNumFmt(x)) : false;
			y = y ? Number(timeToNumFmt(y)) : false;
			for (var i = 0, a = '', b = ''; i < 25; i++) {
				a = Number(i + '.00');
				b = Number(i + '.50');
				if (x || y) {
					if (a >= x && a <= y) {
						array.push(i + ':00');
					}
					if (b >= x && b <= y) {
						if (i === 24) {
							array.push(i + ':00');
						} else {
							array.push(i + ':30');
						}
					}
				} else {
					if (i === 24) {
						array.push(i + ':' + '00');
					} else {
						array.push(i + ':' + '00');
						array.push(i + ':' + '30');
					}
				}
			}
			return array;
		}

		/**
		 * 改变时间格式为数字格式
		 * @param {String|Array} src 格式：7:30或者['7:30']
		 * @param {Number} type 1->str转化数字，2->数字转化字符串
		 * @returns {String|Array} 根据参数类型返回相应类型
		 */
		function timeToNumFmt(src, type) {
			if (!src) return src;
			if (!type) type = 1;

			var reg = [/\:/g, /\.30?/g, /\./g, /\:50?/g];
			var rule = ['.', '.50', ':', ':30'];

			if (typeof src === 'string') {
				src = [src];
			}

			if (typeof src === 'object' || typeof src === 'array') {
				var array = [];
				for (let i = 0; i < src.length; i++) {
					if (type === 1) {
						array.push(src[i].replace(reg[0], rule[0]).replace(reg[1], rule[1]));
					} else if (type === 2) {
						array.push(src[i].replace(reg[2], rule[2]).replace(reg[3], rule[3]));
					}
				}
				return array.length === 1 ? array[0] : array;
			}

			return src;
		}

		/**
		 * 判断是否在其中
		 * 开始小于预订开始，结束小于预订结束
		 * @param {Array} x 当前数组的时间表，格式：['7:30','10:30']
		 * @param {Array} y 目标数组的时间表，格式：['7:30-10:30','10:30-12:30']
		 * @returns {Array} 返回被包含元素，没有返回 false
		 */
		function showTime(x, y) {
			if (!x) return false;
			var temp = [];
			var array = [];

			if (!y) y = [];

			x = timeTable(x[0], x[1]);
			x = timeToNumFmt(x);

			for (let i = 0, a = null; i < y.length; i++) {
				a = y[i] ? y[i].split(/\-/) : [];
				a = timeTable(a[0], a[1]);
				temp = a.concat(temp);
			}

			temp = temp.sort();
			temp = timeToNumFmt(temp);

			console.log('showTime temp', temp);

			for (let j = 0; j < x.length; j++) {
				if (temp && temp.indexOf(x[j]) <= -1) {
					array.push(x[j]);
				}
			}
			return array.length > 0 ? array : false;
		}

		/**
		 * 获得服务时间
		 * @param {Array} a 格式：['7:30', '21:30']
		 */
		function getServiceTime(a) {
			let rc = [];
			rc.push([a[0], '11:59']);
			rc.push(['12:00', '17:59']);
			rc.push(['18:00', a[1]]);
			return rc;
		}
	</script>

	<script>
		var serviceTime = ['7:30', '21:30'];
		var array = timeTable(serviceTime[0], serviceTime[1]);
		// var showTime = showTime(['7:30', '21:30']);
		var showTime = showTime(['7:30', '21:30'], ['7:30-9:30', '12:30-13:30', '17:00-18:30']);

		console.log('array:', array);
		console.log('showTime:', showTime);

		var _list = {
			disabled: {},
			show: {},
			cache: {}
		};

		var startTime = null;
		var endTime = null;

		renderTimeTable(array, timetabelBd);
		function renderTimeTable(data, box) {
			console.log('data:', data);
			let rc = [];
			for (let i = 0, idx = 0, v = null; i < data.length; i++) {
				v = timeToNumFmt(data[i]) + '';
				idx = i + 1;

				console.log('v:', v);
				_list.cache[idx] = v;
				if (showTime && showTime.indexOf(v) > -1) {
					_list.show[idx] = v;
					rc.push('<li class="timetabel_tr" id="timetabelTr_' + idx + '" onclick="_selectTime(this,' + idx + ')">' + data[i] + '</li>');
				} else {
					_list.disabled[idx] = v;
					rc.push('<li class="timetabel_tr disabled" id="timetabelTr_' + idx + '">' + data[i] + '</li>');
				}
			}
			console.log('_list:', _list);
			box.innerHTML = rc.join('');
		}

		function _selectTime(that, id) {
			console.log('_selectTime id:', id);

			if (!startTime) {
				startTime = _list.cache[id];
				setStartTime(id);
			}


			console.log('startTime:', startTime);
			console.log('endTime:', endTime);
		}

		function setStartTime(id) {
			var el = document.getElementById('timetabelTr_' + id);

			el.className = 'timetabel_tr timetabel_start active';
		}
	</script>

</body>

</html>